Pada membuat user interface. Seorang UI/UX Designer tidak langsung membuat di Figma.

Alasannya:

• Menghemat waktu
• Mengurangi kesalahan
• Membuat kesepatan dengan tim

Insight adalah nilai yang diperoleh dari analisis data secara kualitatif atau kuantitaif yang berisi pola dan tren.

Insight dapat digunakan untuk membuat keputusan yang lebih tepat.

Insighhts:

• Menampilkan informasi kandungan pada produk
• Menampilkan informasi produk serupa lainnya
• Review yang berasal dari berbagai influencer

Sketching adalah proses membuat fitur produk pada kertas. Tujuannya untuk mengkomunikasikan ide-ide produk kepada tim.

Selain itu:

• Menampung ide-ide yang muncul
• Mendokumentasikan proses
• Memilih ide yang akan digunakan

Wireframing adalah membuat kerangka dasar website atau aplikasi. Wireframe dibuat sebelum masuk ke desain yang lebih nyata.

Wireframe menunjukkan:

• Desain dasar
• Fungsi user interface
• Isi konten

Komponen adalah elemen visual yang membentuk layout dari user interface. Komponen dapat digunakan berulang-ulang dalam berbagai bagian produk baik aplikasi dan/atau website.

Contohnya:

• Warna
• Button
• Text

User flow adalah serangkaian langkah yang harus dilakukan pengguna untuk menyelesaikan tugas di situs web atau aplikasi.

User flow juga dapat diartikan sebagai alur pengguna.

Mockup adalah rancangan desain yang akan diterapkan pada produk. Dalam UI/UX desain, mockup meliputi elemen tampilan visual, warna, tipografi, dan navigasi.

Manfaat:

• Menghemat waktu dan biaya
• Menciptakan produk yang sesuai dengan kebutuhan pengguna
• Memiliki gambaran realistis

Prototype adalah simulasi produk akhir untuk menguji alur produk sebelum peluncuran.

Peran penting prototype:

• Mengembangkan pengalaman pengguna
• Menguji dan memvalidasi konsep sebelum memasuki tahap produksi

Rule of 8 adalah prinsip untuk menentukan jarak antara elemen-elemen desain.

Tujuannya:

• Agar mudah dibaca,
• Desain menjadi teratur, dan
• Mudah diakses oleh pengguna.

Rule of 8 biasanya digunakan oleh Google, Apple dan Bootstrap

Rule of 8 umumnya terdapat pada jarak yang digunakan pada:

• Padding
• Margin
• Dimention
• Spacing

Auto Layout adalah fitur yang membuat desain menjadi dinamis. Fungsinya membuat desain responsif untuk web dan aplikasi.

Manfaat auto layout:

• Membuat tombol dan elemen antarmuka secara otomatis menyesuaikan ukuran dan posisi kontainer induknya
• Mengubah tinggi dan lebar objek desain secara dinamis mengikuti konten yang ada

Cara menggunakan auto layout:

• Klik kanan asset (teks, gambar, frame, dll)
• Klik Add auto layout
• Atau gunakan short cut Shift + A

Local styles adalah styles pada file saat ini.

Kelebihan menggunakan local style:

• Membuat desain menjadi konsisten
• Mempercepat proses desain

Text atau typography adalah salah satu elemen dasar dari local style, selain mendukung accessibility dan content readability, text ini bisa bisa jadi penentu tone dari product akhir yang akan dibuat.

Biasanya text dalam local style terdiri dari kombinasi 2 jenis font yang istilahnya biasa disebut font pairing

Ini adalah text scaling dari Material UI yang memiliki skala tipografi yang terdefinisi dengan baik.

Ini berarti teks yang digunakan dalam desain harus mengikuti skala tipografi yang konsisten untuk memastikan tampilan yang rapi dan mudah dibaca.

Colors juga merupakan salah satu elemen dasar dari local style, Fungsi dari color itu sendiri adalah untuk menciptakan “Identitas” dan juga tone dari brand produk digital kita.

Biasanya colors dibagi menjadi primary secondary, lalu accent yang bisa merupakan semantic color, grayscale color dll.

Grid adalah grid panduan dalam mengatur teks dan gambar yang terdiri dari garis vertikal dan horizontal sehingga membuat format kolom dan margin

Effect yang bisa dijadikan local style. Effect ini bentuknya bisa bermacam macam mulai dari shadow hingga blur.

Plugins adalah aplikasi yang dibuat oleh Community yang berfungsi untuk menambahkan fitur pada figma. Plugin berjalan di dalam file, melakukan satu atau lebih action pengguna, dan memungkinkan pengguna untuk menyesuaikan pengalaman mereka atau membuat alur kerja yang lebih efisien.

Design system adalah seperangkat aturan, pedoman, komponen, dan sumber daya desain yang diatur sedemikian rupa untuk memastikan konsistensi dalam desain visual dan interaksi antara pengguna dan produk.

Kelebihan menggunakan Design System

• Meningkatkan konsistensi desain
• Meningkatkan kolaborasi tim
• Membuat pengembangan produk menjadi efisien, hemat waktu, dan fleksibel

Material Design adalah design system yang dikembangkan oleh Google untuk membantu mengembangkan produk yang lebih menarik secara visual dan lebih mudah digunakan oleh pengguna.

Website
Figma Community

Polaris adalah sistem desain untuk admin Shopify. Polaris menyediakan panduan dan design system, dan ikon untuk membangun aplikasi di admin Shopify.

Website
Figma Community

Apple Human Interface Guidelines (HIG) adalah sekumpulan prinsip dan design system untuk membuat aplikasi dan antarmuka pengguna untuk platform Apple. Ini mencakup iOS, macOS, watchOS, dan tvOS

Website
Figma Community

Carbon Design System adalah design system untuk produk dan pengalaman digital IBM. Sistem ini terdiri dari serangkaian gaya, komponen, dan pedoman yang digunakan untuk membuat UI yang terpadu.

Website
Figma Community